import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import _ from 'loadsh'
import { Form, InputNumber, message } from 'antd'
import moment from 'moment'
import { Line, Cell, Split } from '@components/ApprovePre/Approve'
import Text from '@components/Text'
import { strToNum } from '@src/assets/js/tool'
const { Item } = Form
class StepTwoInput extends Component {
  state = {
    keyTitleMap: {}
  }

  initKeyTitleMap () {
    const map = {}
    const list = _.get(this.props.instance || {}, 'currentStep.vars', [])
    list.forEach(li => {
      map[li.key] = li.title
    })
    this.setState({
      keyTitleMap: map
    })
  }

  // 格式化时间
  formatDate (v) {
    v = strToNum(v)
    if (v) {
      return moment(v * 1000).format('YYYY-MM-DD')
    }
    return '无'
  }

  // 获取开始时间
  getStartDate () {
    const instance = this.props.instance
    const history = instance.history || []
    history.sort((a, b) => b.create_datetime - a.create_datetime)
    let o = null
    for (let i = 0; i < history.length; i++) {
      if (history[i].step_key === 'zhongzhi01') {
        o = history[i]
        break
      }
    }
    if (!o) {
      return null
    }
    const vars = o.vars || []
    let date = ''
    for (let i = 0; i < vars.length; i++) {
      if (vars[i].key === 'suspension_begin_datetime') {
        date = vars[i].value
      }
    }
    return date
  }

  // 获取上一步的天数
  initDaysByPrev () {
    const c = this.props.formRef.current
    const instance = this.props.instance
    const history = instance.history || []
    history.sort((a, b) => b.create_datetime - a.create_datetime)
    let o = null
    for (let i = 0; i < history.length; i++) {
      if (history[i].step_key === 'zhongzhi01') {
        o = history[i]
        break
      }
    }
    if (!o) {
      return null
    }
    const vars = o.vars || []
    let day = ''
    for (let i = 0; i < vars.length; i++) {
      if (vars[i].key === 'suspension_temp_days') {
        day = vars[i].value
      }
    }
    if (day && c) {
      c.setFieldsValue({ suspension_check_days: day })
      this.changeDays({ target: { value: day } })
    }
  }

  changeDays (e) {
    const c = this.props.formRef.current
    const days = e.target.value ? Number(e.target.value) : 0
    const date = this.getStartDate()
    if (days && date) {
      this.getEndDate(date, days)
    } else {
      c.setFieldsValue({ suspension_check_end_datetime: undefined })
    }
  }

  // 获取结束时间
  getEndDate (beginDatetime, days) {
    const hide = message.loading('加载中', 120)
    this.$get('/api/common/days/getEndDatetime', {
      begin_datetime: beginDatetime,
      days
    }).then(res => {
      hide()
      if (res.status !== 1) {
        return message.warning(res.message)
      }
      const c = this.props.formRef.current
      c.setFieldsValue({ suspension_check_end_datetime: res.data })
    }).catch(() => hide())
  }

  componentDidUpdate (prev) {
    if (this.props.instance !== prev.instance) {
      this.initKeyTitleMap()
    }
  }

  componentDidMount () {
    this.initKeyTitleMap()
    setTimeout(() => {
      this.initDaysByPrev()
    }, 0)
  }

  render () {
    const { keyTitleMap } = this.state
    return (
      <div>
        <Line>
          <Cell>
            <Item labelCol={{ flex: '120px' }} name='suspension_check_days' label={keyTitleMap.suspension_check_days}>
              <InputNumber style={{ width: '100%' }} placeholder={`请输入${keyTitleMap.suspension_check_days}`} onBlur={e => this.changeDays(e)} />
            </Item>
          </Cell>
          <Split />
          <Cell>
            <Item labelCol={{ flex: '120px' }} name='suspension_check_end_datetime' label={keyTitleMap.suspension_check_end_datetime}>
              <Text format={v => this.formatDate(v)} />
            </Item>
          </Cell>
        </Line>
      </div>
    )
  }
}

StepTwoInput.proptypes = {
  caseDetail: PropTypes.object,
  userInfo: PropTypes.object,
  instance: PropTypes.object,
  formRef: PropTypes.object
}

StepTwoInput.defaultProps = {
  caseDetail: {},
  userInfo: {},
  instance: {},
  formRef: {}
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(StepTwoInput)
